<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>jetpl模板引擎</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta name="apple-touch-fullscreen" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/test.css" media="screen">
    <script type="text/javascript" src="js/jetpl.js"></script>
  </head>
  <body style="background:#f7f7f7;">
    <section class="page-header">
      <h1 class="project-name fmy" style="margin-bottom:15px;">jetpl模板引擎--演示</h1>
      <a href="https://github.com/singod/jetpl" class="btn">View on GitHub</a>
      <a href="https://codeload.github.com/singod/jetpl/zip/gh-pages" class="btn">Download .zip</a>
    </section>

<div class="warpbox fmy">
     <div class="test">
          <h1 class="tc f24" style="margin-bottom:25px;">jetpl模板引擎--演示</h1>
          <ul id="testid"></ul>
     </div>

     <div class="test" style="margin-top:45px;">
     <ul id="view"></ul>
     </div>
     <div class="test"  style="margin-top:25px;" id="content"></div>
</div>
<script id="testData" type="text/tpl">
    <h2 class="f18">标题: <p onclick="go('{%= intro %}')"></p></h2>
	<p>{%= jetpl.escape(desc) %}</p>
	<p>{%= sex==2 ? '男': '女' %}</p>
	{% var vs=100; %}
    {% for (var i=0;i<list.length;i++) { %}
		{% for (var k=0;k<list[i].childmenu.length;k++) { %}
			<li>{%= i %}. {%= list[i].childmenu[k].name %} --- ID：{%= list[i].childmenu[k].id %} ---- 时间：{%= jetpl.date(list[i].childmenu[k].time,"YYYY-MM-DD h:m:s") %}
			</li>	
		{% } %}
	{% } %}

</script>
<script id="list" type="text/tpl">
<h2  class="f18">{% intro %}</h2>

<ul>
    {% var vs='(each循环)'; %}
    {{each list val i}}
	    {{each val.childmenu vals k}}
		    <li>
			<span>{%=i%}. </span>
			<span>标题: {%=vals.name%}---- &nbsp;&nbsp;&nbsp;</span>
			<span>ID： {%= vals.id %} ---- &nbsp;&nbsp;&nbsp;</span>
			<span>time： {%= jetpl.date(vals.time,"YYYY-MM-DD") %}  &nbsp;&nbsp;&nbsp;{%=vs%}</span>	
			</li>
		{{/each}}
	{{/each}}
</ul>
</script>
<script id="contentData" type="text/tpl">
    <h2 class="f18">标题: {%= title %}</h2>

    {% for (var i=0;i<list.length;i++) { %}

			<span>{%= i %}. {%= list[i] %} &nbsp;&nbsp;</span>	

	{% } %}

</script>
<script type="text/javascript">
var rudata = {
	title: '嵌入子模板',
	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var onedata = {
    title: "abc",
    list: [
        {name: "乱码",       city: "杭州", post: "前端", time: 1435650377},
        {name: "冰花",       city: "北京", post: "水军", time: 1435650377},
        {name: "高琦",       city: "福建", post: "水军", time: 1435650377},
        {name: "银狐",       city: "汕头", post: "前端", time: 1435650377},
        {name: "辛巴",       city: "深圳", post: "前端", time: 1435650377},
        {name: "龙秋明",     city: "北京", post: "前端", time: 1435650377},
        {name: "小麒麟",     city: "北京", post: "前端", time: 1435650377},
        {name: "秋天的落叶", city: "广东", post: "前端", time: 1435650377}
    ]
};
var data = {
	intro: '一群码javascript的骚年，幻想改变世界，却被世界改变。',
	desc:"<u>html代码</u> <em>em</em>",
	sex:1,
	list:[
        {
            "name": "美妆",
            "id": "48",
            "childmenu": [
                {
                    "fullName": "面部护理",
                    "id": 52,
                    "name": "面部护理", time: 1435650377
                },
                {
                    "fullName": "面膜",
                    "id": 69,
                    "name": "面膜", time: 1435650377
                },
                {
                    "fullName": "身体护理",
                    "id": 54,
                    "name": "身体护理", time: 1435650377
                },
                {
                    "fullName": "彩妆",
                    "id": 53,
                    "name": "彩妆", time: 1435650377
                }
            ]
        },
        {
            "name": "母婴",
            "id": "49",
            "childmenu": [
                {
                    "fullName": "纸尿裤",
                    "id": 56,
                    "name": "纸尿裤", time: 1435650377
                },
                {
                    "fullName": "奶粉",
                    "id": 71,
                    "name": "奶粉", time: 1435650377
                },
                {
                    "fullName": "辅食",
                    "id": 60,
                    "name": "辅食", time: 1435650377
                },
                {
                    "fullName": "用具",
                    "id": 70,
                    "name": "用具", time: 1435650377
                },
                {
                    "fullName": "洗护/口腔",
                    "id": 58,
                    "name": "护肤洗浴", time: 1435650377
                }
            ]
        },
        {
            "name": "护理",
            "id": "50",
            "childmenu": [
                {
                    "fullName": "头发护理",
                    "id": 61,
                    "name": "头发护理", time: 1435650377
                },
                {
                    "fullName": "沐浴用品",
                    "id": 73,
                    "name": "沐浴用品", time: 1435650377
                },
                {
                    "fullName": "口腔护理",
                    "id": 72,
                    "name": "口腔护理", time: 1435650377
                },
                {
                    "fullName": "女士用品",
                    "id": 63,
                    "name": "女士用品", time: 1435650377
                }
            ]
        },
        {
            "name": "保健",
            "id": "51",
            "childmenu": [
                {
                    "fullName": "健康食品",
                    "id": 66,
                    "name": "健康食品", time: 1435650377
                },
                {
                    "fullName": "计生用品",
                    "id": 67,
                    "name": "计生用品", time: 1435650377
                },
                {
                    "fullName": "维他命",
                    "id": 74,
                    "name": "维他命", time: 1435650377
                },
                {
                    "fullName": "身体调理",
                    "id": 75,
                    "name": "身体调理", time: 1435650377
                },
                {
                    "fullName": "眼部护理",
                    "id": 76,
                    "name": "眼部护理", time: 1435650377
                }
            ]
        }
    ]
}

var gethtml = document.getElementById('testData').innerHTML
jetpl(gethtml).render(data, function(html){
	document.getElementById('testid').innerHTML = html
});


jetpl('#list').render(data, function(html){
	document.getElementById('view').innerHTML = html
});

jetpl('#contentData').render(rudata, function(html){
	document.getElementById('content').innerHTML = html
});
</script>
  </body>
</html>
